<!-- 设备弹出框内容 -->
<template>
  <div class="q-pa-md bg-white">
    <div class="cursor-pointer row">
      <span class="text-body1 q-pl-sm">设备信息</span>
      <q-space></q-space>
      <q-icon name="mdi-close" @click="closeDialog"></q-icon>
    </div>
    <q-table
      flat
      :rows="dataList"
      :columns="columns"
      no-data-label="暂无数据"
      no-results-label="过滤器没有发现任何结果"
      row-key="name"
      :visible-columns="visibleColumns"
      v-model:pagination="pagination"
      hide-pagination
      :loading="loading"
      binary-state-sort
    >
          <!-- 表格的加载状态 -->
        <template v-slot:loading>
          <q-inner-loading showing color="grey" />
        </template>
          <!-- 表格顶部 -->
        <template v-slot:top>
          <div style="width: 200px" class="q-mt-xs q-mr-sm" >
            <q-select dense outlined options-dense v-model="headerSeach" :options="selectSeach" />
          </div>
          <div v-show="headerSeach" style="width: 200px" class="q-mr-sm q-mt-xs">
            <q-input  outlined v-model="queryList[seachContent[headerSeach]]" dense />
          </div>
          <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated padding="8px 8px 7px" icon="search" color="primary" label="搜索" @click="handlerSearch" />
          <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated padding="8px 8px 7px" color="primary" label="复位搜索" @click="handleResetSearch" />
          <q-space />
          <q-select
            v-model="visibleColumns"
            multiple
            outlined
            dense
            options-dense
            :display-value="'表头选择'"
            emit-value
            map-options
            :options="columns"
            option-value="name"
            options-cover
            style="min-width: 150px"
            class="q-mr-sm q-mt-xs"
          />
        </template>
          <!-- 无数据提示信息 -->
        <template v-slot:no-data="{ message }">
          <div class="full-width row flex-center text-accent q-gutter-sm">
            <span>
              {{ message }}
            </span>
          </div>
        </template>
          <!-- 表格头部 -->
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th></q-th>
            <q-th
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
            >
              {{ col.label }}
              <q-icon v-if="col.isSort" class="cursor-pointer" size="18px" :name="pagination.descending?'expand_less':'expand_more'" @click="handlerSort"></q-icon>
            </q-th>
          </q-tr>
        </template>
          <!-- 表格主体 -->
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td>
            <q-checkbox
              dense
              :val="props.row"
              v-model="selected"
              @update:model-value="selectedEvent"
            />
          </q-td>
            <q-td
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
            >
              {{ col.value }}
            </q-td>
          </q-tr>
        </template>
    </q-table>
    <!-- 分页 -->
    <Pagination
      :pageSizes="['5条/页','10条/页','20条/页','30条/页']"
      @updatePage="updatePage"
      @updateSizes="updateSizes"
      :pagination="pagination"
      @handlerRefresh="handlerRefresh"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import { getSensorInitInfo, getSensorList } from 'src/api/devAxios'
import Pagination from 'src/components/pagination'
import AssetInfoDialog from 'src/pages/common/assetInfoDialog'

const labelArr = {
        dev_code: '设备编号',
        alias_name: '别名',
        sn: '序列号',
        category: '种类',
        vendor: '厂商',
        model: '型号',
        is_online: '是否在线',
        update_time: '数据更新时间',
        create_name: '创建人员',
        modify_name: '修改人员',
        modify_time: '修改时间',
        create_time: '创建时间',
      }
export default {
  data () {
    return {
      dataList: [],
      filter: ref(''),

      columns: [
        { name: 'idIndex', required: true, label: 'ID', align: 'center', field: 'idIndex', isSort: true },
        { name: 'dev_code', required: true, label: '设备编号', align: 'center', field: 'dev_code' },
        { name: 'alias_name', required: true, label: '别名', align: 'center',field: 'alias_name' },
        { name: 'sn', align: 'center', label: '序列号', field: 'sn' },
        { name: 'category', align: 'center', label: '种类', field: 'category' },
        { name: 'vendor', align: 'center', label: '厂商', field: 'vendor' },
        { name: 'model', align: 'center', label: '型号', field: 'model' },
      ],

      // 表格头部
      headerSeach: ref(''),
      seachContent: {
       '设备编号':  'dev_code',
        '别名': 'alias_name',
        '序列号': 'sn',
        '种类': 'category',
        '厂商': 'vendor',
        '型号': 'model',
      },
      selectSeach: [
        '', '设备编号','别名','序列号'
      ],
       // 右侧表头选择
       visibleColumns: ref([ 'idIndex','dev_code','alias_name','sn','category','vendor','model']),
       pagination: { // 分页
        sortBy: 'desc', // 列名
        descending: false, // 是否按照降序排序
        page: 1, // 页码（当前显示第几页的数据）
        rowsPerPage: 5, // 每页多少行
        rowsNumber: 5 // 共多少条
      },
      queryList: {
        page: 1,
        page_size: 5,
        ordering: 'id'
      },
      loading: false, // 表格的加载状态
      seneorParams: {
        category: [],
        model: [],
        vendor: [],
        modelName: []
      },
      sensorAllType: {
        query_param: 'one'
      },
      selected: []
    };
  },

  components: {
    Pagination
  },

  computed: {
  },

  watch: {
  },

  mounted() {
    this.sensorAllType = {}
    this.sensorAllType.query_param = 'one'
    this.getAllInfo(this.sensorAllType)
    this.gainSensorList()
  },

  methods: {
    // 刷新
    handlerRefresh() {
      this.handleResetSearch()
    },
    // 切换当前页数
    updatePage(val) {
      if (!val) return
      this.pagination.page = val*1
      this.gainSensorList()
    },
    // 切换每页的行数
    updateSizes(val) {
      this.pagination.rowsPerPage = parseFloat(val)
      this.gainSensorList()
    },
    /**
     * 搜索
     */
    handlerSearch() {
      this.gainSensorList()
    },
    /**
     * 复位搜索
     */
    handleResetSearch() {
      this.pagination = {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 5
      }
      this.queryList = {
        page: 1,
        page_size: 5,
        ordering: 'id'
      }
      this.headerSeach = ''
      this.gainSensorList()
    },
    /**
     * 排序
     */
    handlerSort() {
      this.pagination.descending = !this.pagination.descending
      this.gainSensorList()
    },
    /**
     * 获取设备类型的全部信息
     */
    getAllInfo(sensorAllType) {
      getSensorInitInfo(sensorAllType).then(res => {
       if (res) var { status, data } = res
        if (status === 200) {
          if (sensorAllType.query_param === 'one') {
            this.seneorParams = data
            this.seneorParams.modelName = []
            if (this.seneorParams.model && this.seneorParams.model.length > 0) {
              this.seneorParams.model.forEach(item => {
                this.seneorParams.modelName.push(item.model_name)
              })
            }
          } else if (sensorAllType.query_param === 'vendor') {
            if (status === 200) {
              this.seneorParams.vendor = data.vendor
              this.seneorParams.model = data.model
              this.seneorParams.modelName = []
              if (this.seneorParams.model && this.seneorParams.model.length > 0) {
                this.seneorParams.model.forEach(item => {
                  this.seneorParams.modelName.push(item.model_name)
                })
              }
              this.creatUpdateQuery.vendorValue = this.seneorParams.vendor[0]
              this.creatUpdateQuery.modelValue = this.seneorParams.modelName[0]
            }
          } else if (sensorAllType.query_param === 'model') {
            if (status === 200) {
              if (data && data.length > 0) {
                this.modelTypeId = data[0].type_id
              } else {
                this.modelTypeId = null
              }
            }
          }
        }
      })
    },
    /**
     * 获取设备列表
     */
    gainSensorList() {
      return new Promise(resolve => {
        this.loading = true
        this.queryList.page = this.pagination.page
        this.queryList.page_size = this.pagination.rowsPerPage
        this.queryList.ordering = this.pagination.descending?'-id':'id'

        getSensorList(this.queryList).then(res => {
          if (res) var { status, data, totalCounts } = res
          if (status === 200) {
            this.dataList = []
            if (data && data.length > 0) {
              data.forEach((item, index) => {
                // 处理序号
                if (!this.pagination.descending) {
                  item.idIndex = index + 1 + (this.queryList.page - 1) * this.queryList.page_size
                } else {
                  item.idIndex = totalCounts - index - (this.queryList.page - 1) * this.queryList.page_size
                }
                this.dataList.push({
                  id: item.id,
                  idIndex: item.idIndex,
                  dev_code: item.dev_code,
                  alias_name: item.alias_name,
                  sn: item.sn,
                  category: item.category,
                  vendor: item.vendor,
                  model: item.model
                })
              })
            }
            this.pagination.rowsNumber = totalCounts
          }
          this.loading = false
          resolve()
        }).catch(_ => {
          this.loading = false
        })
      })
    },
    /**
     * 选择事件
     */
    selectedEvent(val) {
      if (val.length === 1) {
          this.$emit('selectedEvent', val)
          return
        }
        if (val && val.length > 1) {
          this.selected = val.slice(val.length-1, val.length)
          this.$emit('selectedEvent', this.selected)
        }
    },
    /**
     * 关闭对话框
     */
    closeDialog() {
      this.$emit('closeDialog', false)
    },
  }
}

</script>
<style lang='scss' scoped>
// 固定操作列
.my-sticky-column-table {
  tr:first-child {
    th:last-child {
      background: #fff;
    }
  }
  td {
    &:last-child {
      background: #fff;
    }
  }
  th:last-child, td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
  }
}
// 弹出的对话框样式
.dialog-form-container {
  ul {
    li {
      overflow: hidden;
      min-height: 42px;
      line-height: 42px;
      margin-bottom: 5px;
      &:nth-child(1) {
        margin-bottom: 25px;
      }
      &:nth-child(2) {
        margin-bottom: 25px;
      }
      >div {
        &:first-child {
          float: left;
          margin-right: 10px;
        }
        &:last-child {
          float: right;
          width: 200px;
        }
      }
      >span {
        &:first-child {
          float: left;
          margin-right: 10px;
        }
        &:last-child {
          float: right;
          width: 200px;
        }
      }
    }
  }
}


</style>
